<!-- 产品信息 -->
<template>
  <div>
    <div class="title pl0">
      <h3>产品信息</h3>
      <el-button type="text" v-if="isDisable && isLocked == '待锁定'" @click="handleEdit"
        >编辑</el-button
      >
    </div>
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="130px"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="产品样式:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.productStyle"
                v-if="!isDisable"
                size="small"
                filterable
                @change="handleProductStyleChange"
                placeholder="请选择"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in productStyleList"
                  :key="index"
                />
              </el-select>
              <span v-else-if="productStyleList.length">{{
                querySelectName(
                  productStyleList,
                  formData.productStyle,
                  "label",
                  "value"
                )
              }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品单位:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.productUnit"
                v-if="!isDisable"
                size="small"
                filterable
                placeholder="请选择"
              >
                <el-option label="枚" value="枚"> </el-option>
                <el-option :disabled="formData.productStyle==2" label="套" value="套"> </el-option>
              </el-select>
              <span v-else>{{ formData.productUnit }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="贴标方式:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.tagAffixWay"
                v-if="!isDisable"
                size="small"
                filterable
                placeholder="请选择"
              >
                <el-option label="自动贴" :disabled="formData.productStyle!=2" :value="1"> </el-option>
                <el-option label="手贴" :value="2"> </el-option>
              </el-select>
              <span v-else>{{
                format(formData.tagAffixWay)
              }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8" v-if="formData.productStyle == 2">
          <el-form-item label="卷向:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.scrollDirection"
                v-if="!isDisable"
                size="small"
                filterable
                placeholder="请选择"
              >
                <el-option label="页面朝内" :value="1"> </el-option>
                <el-option label="页面朝外" :value="2"> </el-option>
              </el-select>
              <span v-else>{{
                formData.scrollDirection == 1 ? "页面朝内" : "页面朝外"
              }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.productStyle == 2">
          <el-form-item label="出标方向:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-select
                        filterable
                v-model="formData.outDirection"
                v-if="!isDisable"
                size="small"
                filterable
                placeholder="请选择"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in outDirectionList"
                  :key="index"
                >
                </el-option>
              </el-select>
              <span v-else-if="outDirectionList.length">{{
                querySelectName(
                  outDirectionList,
                  formData.outDirection,
                  "label",
                  "value"
                )
              }}</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="formData.productStyle == 2">
          <el-form-item label="卷芯大小:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.mandrelSize"
                type="number"
                v-if="!isDisable"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.mandrelSize }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" v-if="formData.productStyle == 2">
        <el-col :span="8">
          <el-form-item label="外直径不超过:">
            <div :class="isDisable ? 'border_line' : ''">
              <el-input
                v-model="formData.notOverDiameter"
                v-if="!isDisable"
                type="number"
                placeholder="请输入内容"
                size="small"
              >
                <div slot="suffix" style="padding-right: 5px; padding-top: 3px">
                  mm
                </div>
              </el-input>
              <span v-else
                >{{ formData.notOverDiameter
                }}<span class="pl16">mm</span></span
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer mt16" v-if="!isDisable">
      <el-button size="small"  @click="handleCancel" :loading="loading"
        >取消</el-button
      >
      <el-button
        size="small"
        class="ml16"
        type="primary"
        @click="handleSave"
        :loading="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import { querySelectName } from "@/utils";
export default {
  props: {
    productCode: {
      type: String,
      default: () => {
        return "";
      },
    },
    isLocked:{
      type: String,
      default: () => {
        return "";
      },
    },
    isShowEdits:{
      type: Boolean,
      default: () => {
        return false;
      },
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    formModel: {
      immediate: true,
      handler(newVal, oldVal) {
        this.formData = newVal.baseData;

      },
    },
  },
  data() {
    return {
      querySelectName,
      formData: {
      }, //表单
      rules: {}, //表单验证
      productStyleList: [
        { label: "卷式", value: 2 },
        { label: "平张", value: 1 },
        { label: "折页", value: 3 },
      ], //产品样式下拉数据

      outDirectionList: [
        { label: "上", value: 1 },
        { label: "下", value: 2 },
        { label: "左", value: 3 },
        { label: "右", value: 4 },
      ], //出标方向
      loading: false,
      isDisable: true,
    };
  },
  methods: {
    //保存
    handleSave() {
      this.loading = true;
      this.$api.business
        .UpdateProductInfoData(this.formData)
        .then((res) => {
          this.loading = false;
          this.isDisable = true;
          let obj = {
            state: 2,
            productCode: this.productCode,
          };
          this.$api.business.UpdateProductState(obj).then((res) => {
            this.$message.success("保存成功");
            this.isShowEdits = true
            this.$emit('showEditEvent',this.isShowEdits)
            this.getDetail(this.productCode);
          });
        })
        .catch(() => {
          this.loading = false;
        });
    },

    handleEdit(){
      if(this.isShowEdits){
        this.isDisable = false
        this.isShowEdits = false
        this.$emit('showEditEvent',this.isShowEdits)
      }else{
        this.$message.warning('有未保存的编辑，请保存后再编辑')
      }
    },

    //产品样式选择事件
    handleProductStyleChange(e){
      if(this.formModel.productPackingInfoList.length>0){
        if (this.formModel.baseData.productStyle == 2) {
          //卷式
          this.formModel.productPackingInfoList.forEach((item) => {
            item.boxEqualTags =
              item.boxEqualPackages * this.formModel.baseData.pageEqualTags;
            item.describe =
              "1箱*" +
              item.boxEqualPackages +
              "卷*" +
              this.formModel.baseData.pageEqualTags +
              "枚";
          });
        } else {
          if (this.formModel.baseData.productUnit == "枚") {
            //单标
            this.formModel.productPackingInfoList.forEach((item) => {
              item.boxEqualTags =
                item.boxEqualPackages *
                this.formModel.baseData.pageEqualTags *
                this.formModel.baseData.packageEqualPages;

              item.describe =
                "1箱*" +
                item.boxEqualPackages +
                "包*" +
                this.formModel.baseData.packageEqualPages +
                "张*" +
                this.formModel.baseData.pageEqualTags +
                "枚";
            });
          } else {
            this.formModel.productPackingInfoList.forEach((item) => {
              item.boxEqualTags =
                this.formModel.baseData.pageEqualTags *
                this.formModel.baseData.packageEqualPages;
            });
            if (this.formModel.baseData.calculationMethod == 0) {
              this.formModel.productPackingInfoList.forEach((item) => {
                item.describe =
                  "1箱*" +
                  item.boxEqualPackages +
                  "包*" +
                  this.formModel.baseData.packageEqualPages +
                  "张*" +
                  this.formModel.baseData.pageEqualTags +
                  "套";
              });
            } else {
              this.formModel.productPackingInfoList.forEach((item) => {
                item.describe =
                  "1箱*" +
                  item.boxEqualPackages +
                  "包*" +
                  this.formModel.baseData.packageEqualPages +
                  "张*1/" +this.formModel.baseData.pageEqualTags+"套";
              });
            }
          }
        }
      }
    },

    format(val){
      let str = ""
      if(val == 1){
        str = '自动贴'
      }else if(val == 2){
        str = '手贴'
      }
      return str
    },

     //取消
     handleCancel(){
      this.$confirm("信息尚未保存，是否保存?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      }).then(() => {
        this.handleSave()
      }).catch(() => {
        this.isShowEdits = true
        this.$emit('showEditEvent',this.isShowEdits)
        this.getDetail(this.productCode);
        this.isDisable = true
      });
    },

    //获取详情
    getDetail(id) {
      this.$emit('init','')
    },
  },
};
</script>

    <style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.border_line {
  border-bottom: 1px solid #dcdfe6;
  height: 32px;
}
</style>
